<template>
	<div style="margin: 20px;">
		<el-carousel :interval="4000" type="card" height="400px">
			<el-carousel-item v-for="item in contents" :key="item">
				<div v-html="item"></div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				contents:[
					"<h3 style='text-align:center;'>项目介绍</h3>",
					"<h3 style='text-align:center;'>技术架构</h3>",
					"<h3 style='text-align:center;'>功能计划</h3>",
					"<h3 style='text-align:center;'>开发环境</h3>"
				]
			}
		}
	}
</script>

<style>
	.el-carousel__item{
		border-radius: 30px;
	}
	
	.el-carousel__item:nth-child(4n) {
		background-color: #7CD399;
	}
	
	.el-carousel__item:nth-child(4n+1) {
		background-color: #C98585;
	}
	
	.el-carousel__item:nth-child(4n+2) {
		background-color: #41A7B9;
	}
	.el-carousel__item:nth-child(4n+3) {
		background-color: #409EFF;
	}
</style>